<template>
  <el-form
    ref="ruleFormRef"
    :model="formInline"
    :rules="formRules"
    label-width="auto"
    v-loading="isLoading"
  >
    <el-row :gutter="30">
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item :label="titles?.id" prop="id">
          <el-input
            v-model="formInline.id"
            clearable
            :placeholder="prompt?.id"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item :label="titles?.projectName" prop="projectName">
          <el-input
            v-model="formInline.projectName"
            clearable
            :placeholder="prompt?.projectName"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item :label="titles?.productName" prop="productName">
          <el-input
            v-model="formInline.productName"
            clearable
            :placeholder="prompt?.productName"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item :label="titles?.deviceSN" prop="deviceSN">
          <el-input
            v-model="formInline.deviceSN"
            clearable
            :placeholder="prompt?.deviceSN"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item :label="titles?.alarmTitle" prop="alarmTitle">
          <el-input
            v-model="formInline.alarmTitle"
            clearable
            :placeholder="prompt?.alarmTitle"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item :label="titles?.confirm" prop="confirm">
          <el-input
            v-model="formInline.confirm"
            clearable
            :placeholder="prompt?.confirm"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item :label="titles?.alarmType" prop="alarmType">
          <el-input
            v-model="formInline.alarmType"
            clearable
            :placeholder="prompt?.alarmType"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item :label="titles?.dealStatus" prop="dealStatus">
          <el-input
            v-model="formInline.dealStatus"
            clearable
            :placeholder="prompt?.dealStatus"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item :label="titles?.createdAt" prop="createdAt">
          <el-input
            v-model="formInline.createdAt"
            clearable
            :placeholder="prompt?.createdAt"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item :label="titles?.place" prop="place">
          <el-input
            v-model="formInline.place"
            clearable
            :placeholder="prompt?.place"
          />
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import ReCol from "@/components/ReCol";
import type { FormRules } from "element-plus";
import { titles, prompt } from "./index";
import type { infoType } from "@/api/operate/alarm-management/alarm-log/index";
type FormProps = {
  formInline: infoType;
  isLoading: boolean;
};

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({}) as infoType,
  isLoading: false
});

const formRules = reactive(<FormRules>{});
const ruleFormRef = ref();
function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>
